$(document).ready(function(){

    var arr = location.search.match(/cat=(\d+)/);
    if(!arr){
        var cat = 'all'
    }else{
        var cat = arr[1]
    }

    var loadindex = layer.load(0,{
        shade:['#000',]
    });

    $.ajax({
        url: "php/list.php",
        data: {cat},
        dataType: "json",
        success:res=>{
            var {data} = res;
            if(data.length){
                // 给数据做分页显示
                var pageSize = 18;
                new Page('fenye',{
                    first:"首页",
                    previous:"上一页",
                    next:"下一页",
                    last:"尾页"
                },{
                    total:data.length,
                    pageSize
                },function(currentPage){
                    var arr = data.slice((currentPage-1)*pageSize,currentPage*pageSize)
                    var str = '';
                    for(var i=0; i<arr.length; i+=3){
                        str += `
                            <div class="section">

                                <div class="components-list-box">

                                    <div class="container channel-product-two4">

                                        <div class="row">
                                            <div class="span10 product-cell">
                    
                                                <div class="figure">
                    
                                                    <a href="details.html?id=${arr[i].id}">
                                                        <img src="${arr[i].img}" alt="">
                                                    </a>
                
                                                </div>
                    
                                                <h3 class="title">
                    
                                                    <a href="details.html?id=${arr[i].id}">${arr[i].name}</a>
                    
                                                </h3>
                    
                                                <p class="price"><span>${arr[i].price}</span>元<i>起</i></p>
                    
                                            </div>
                                            
                                            <div class="span10 product-cell">
                    
                                                <div class="figure">
                    
                                                    <a href="details.html?id=${arr[i+1].id}">
                                                        <img src="${arr[i+1].img}" alt="">
                                                    </a>
                
                                                </div>
                    
                                                <h3 class="title">
                    
                                                    <a href="details.html?id=${arr[i+1].id}">${arr[i+1].name}</a>
                    
                                                </h3>
                    
                                                <p class="price"><span>${arr[i+1].price}</span>元<i>起</i></p>
                    
                                            </div>

                                            <div class="span10 product-cell">
                    
                                            <div class="figure">
                
                                                <a href="details.html?id=${arr[i+2].id}">
                                                    <img src="${arr[i+2].img}" alt="">
                                                </a>
            
                                            </div>
                
                                            <h3 class="title">
                
                                                <a href="details.html?id=${arr[i+2].id}">${arr[i+2].name}</a>
                
                                            </h3>
                
                                            <p class="price"><span>${arr[i+2].price}</span>元<i>起</i></p>
                
                                        </div>
                                        </div>

                                    </div>
                        
                                </div>
                            
                            </div>
                        `
                    }
                    $('#main>.box').html(str)
                    layer.close(loadindex);
                })
                
            }else{
                
                // 提示当前分类下没有商品区首页重新查看分类
                layer.msg('抱歉现处于缺货状态',{
                    icon:2,
                    time:2000
                },function(){
                    window.location.href = 'index.html';
                    layer.close(loadindex);
                })
            }
        }
    });
});